<template>
  <div class="shopping-classify">
    <div class="right-menu" id="container">
      <!-- 头 -->
      <div>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <img
                v-if="biaotixiu ? false : true"
                style="margin: 0% 0% -4% -70%;"
                src="../../assets/image/biaotixiugai.png"
                @click="handleChange"
              /></div
          ></el-col>
          <el-col :span="8"
            ><div
              class="grid-content bg-purple-light"
              style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
            >
              {{ this.title }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <svg-icon
                :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
                style="
            width: 20px;
            height: 20px;
            color: #f4deb0;
            margin: 0% -70% 1% 0%;
          "
                @click="buttoncli"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 第一部分 -->
      <div style="margin-top: 4%;">
        <el-row type="flex" class="row-bg-1" justify="space-between">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="10"
            ><div class="grid-content bg-purple-light">
              <el-row type="flex" class="row-bg-2" justify="space-between">
                <el-col :span="8"
                  ><div class="grid-content bg-purple">
                    {{ this.taskForm.total_num }}
                  </div></el-col
                >
                <el-col :span="8"
                  ><div class="grid-content bg-purple-light">
                    {{ this.taskForm.completed_num }}
                  </div></el-col
                >
                <el-col :span="7"
                  ><div class="grid-content bg-purple">
                    {{ this.taskForm.incompleted_num }}
                  </div></el-col
                >
              </el-row>
            </div></el-col
          >
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </div>

      <!-- 第二部分 -->
      <div style="margin-top: 2%;">
        <el-row type="flex" class="row-bg-3" justify="space-between">
          <el-col :span="5"
            ><div class="grid-content bg-purple">
              <div
                style="margin-top: 27%;font-size: 50px;font-weight: 700;margin-left: -155px;"
              >
                {{ this.totalarr }}
              </div>
              <el-row type="flex" class="row-bg-4" justify="space-around">
                <el-col :span="6"
                  ><div
                    class="grid-content bg-purple"
                    style="margin-left: -35px;"
                  >
                    {{ this.month }}
                  </div></el-col
                >
                <el-col :span="6"
                  ><div
                    class="grid-content bg-purple"
                    style="margin-left: -55px;"
                  >
                    {{ this.Contracts }}
                  </div></el-col
                >
              </el-row>
            </div></el-col
          >
          <el-col :span="10"
            ><div class="grid-content bg-purple-light">
              <img
                style="margin: 4% 0% 0% 10%;"
                src="../../assets/image/leiji.png"
                v-if="accumulation"
                @click="accumulationClick"
              />
              <img
                v-if="thisYear"
                @click="thisYearClick"
                style="margin: 4% 0% 0% 10%;"
                src="../../assets/image/bennian.png"
              /></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <collect :message="this.barquantity" /></div
          ></el-col>
        </el-row>
      </div>

      <!-- 第三部分 -->
      <div style="margin-top: 5%;">
        <el-row type="flex" class="row-bg-5" justify="space-between">
          <el-col :span="6"
            ><div
              class="grid-content bg-purple"
              style="width: 95%;margin-left: 10px;"
            >
              <sign :message="this.signarr" /></div
          ></el-col>
          <el-col :span="6"
            ><div
              class="grid-content bg-purple-light"
              style="font-size: 40px;font-weight: 700;margin-top: -13px;"
            >
              {{ this.reports }}
            </div></el-col
          >
          <el-col :span="6"
            ><div
              class="grid-content bg-purple"
              style="width: 95%;margin-left: 10px;"
            >
              <detection-factor :message="this.detection" /></div
          ></el-col>
        </el-row>
      </div>

      <!--标题修改-->
      <el-dialog :visible.sync="titleVisible" append-to-body width="30%">
        <el-form ref="installForm" :model="installForm" label-width="80px">
          <el-form-item label="标题修改">
            <el-input
              maxlength="18"
              show-word-limit
              v-model="installForm.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="titleVisible = false">取消</el-button>
          <el-button type="primary" @click="sumitInstall">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as statisServer from "@/api/statistics";
import { getInfo } from "@/api/user";
import screenfull from "screenfull";
import collect from "./components/collect.vue";
import sign from "./components/sign.vue";
import detectionFactor from "./components/detectionFactor.vue";
export default {
  components: { collect, sign, detectionFactor },
  data() {
    return {
      screenfull: false,
      title: "环测链数据统计平台",
      titleVisible: false,
      installForm: { name: "" },
      taskForm: {
        total_num: 0, // 采样任务百分比 （完成/总数量）
        completed_num: 0,
        incompleted_num: 0
      },
      lineChartData: {},
      totalarr: 0, // 求和
      month: "", //获取当月合同
      Contracts: "",
      barquantity: [],
      signarr: [],
      detection: [],
      reports: "",
      issue: "1",
      accumulation: true,
      thisYear: false,
      isFullscreen: false,
      biaotixiu: false
    };
  },

  created() {
    // 监听事件
    window.addEventListener("resize", this.onresize);
    this.getList();
    this.findTasks();
    this.findContactList();
    this.findSampleClass();
    this.findvalid();
    this.findSortContNumList();
    this.NumberReports();
    this.factorNumber();
  },

  // beforeDestroy() {
  //   // 取消监听事件
  //   window.removeEventListener("resize", this.onresize);
  // },
  methods: {
    // 监听是否全屏状态
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.isFullscreen = winFlag;
      } else {
        this.isFullscreen = winFlag || isFull;
      }
      // console.log(winFlag); // true全屏   false不是全屏
        this.biaotixiu = winFlag;
    },
    buttoncli() {
      const element = document.getElementById("container");
      if (!screenfull) {
        this.$message({
          message: "浏览器不能全屏，安装其他版本试试",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle(element);
      this.findSampleClass();
      this.findSortContNumList();
      this.factorNumber();
    },

    buttoncliArr() {
      const element = document.getElementById("container");
      if (!screenfull) {
        this.$message({
          message: "浏览器不能全屏，安装其他版本试试",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle(element);
    },

    getList() {
      getInfo().then(res => {
        this.title = res.result.screenName;
      });
    },

    // 任务
    findTasks() {
      statisServer.findCompleteTask({ type: 1 }).then(res => {
        if (res.code === 200) {
          const taskForm = res.result.find(i => i.name === "报告编制任务");
          this.taskForm.total_num = taskForm.totalCnt;
          this.taskForm.completed_num = Number(
            taskForm.totalCnt - taskForm.completeCnt
          ).toFixed(0);
          this.taskForm.incompleted_num = taskForm.completeCnt;
        }
      });
    },
    //合同总数
    findContactList() {
      statisServer.findValidContractsForPass11Month().then(res => {
        if (res.code === 200) {
          this.lineChartData = res.result || [];
          // 求和
          this.lineChartData.contactNum.forEach(item => {
            this.totalarr += item;
          });
          //获取当月合同
          this.month = this.lineChartData.contactNum.pop();
        }
      });
    },

    //样品类别
    findSampleClass() {
      statisServer.findStoredSampleClassificationCnt({ limit: 6 }).then(res => {
        if (res.code === 200) {
          var arr = [];
          var barData = res.result.xNameData;
          var barquantity = res.result.xValData;
          //
          barData.forEach((item, i) => {
            arr.push({
              name: item,
              value: barquantity[i]
            });
          });
          this.barquantity = arr;
        }
      });
    },

    findvalid() {
      statisServer.findValidContracts({ type: 0 }).then(res => {
        if (res.code === 200) {
          this.Contracts = res.result.cusSum;
        }
      });
    },
    //签合同排名
    findSortContNumList() {
      statisServer.findSortContNum({ type: 1, limit: 5 }).then(res => {
        if (res.code === 200) {
          var arr = [];
          var barData = res.result.xNameData;
          var barquantity = res.result.xValData;
          //
          barData.forEach((item, i) => {
            arr.push({
              code: item,
              fundPost: barquantity[i]
            });
          });

          arr.sort((a, b) => {
            return b.fundPost - a.fundPost;
          }); //升序
          this.signarr = arr.slice(0, 10);
        }
      });
    },
    //签发报告数
    NumberReports() {
      statisServer.getReport({ type: this.issue }).then(res => {
        if (res.code === 200) {
          this.reports = res.result;
        }
      });
    },
    //因子数
    factorNumber() {
      statisServer.detectorFactor().then(res => {
        if (res.code === 200) {
          var arr = res.result;
          arr.sort((a, b) => {
            return b.value - a.value;
          }); //升序
          this.detection = arr.slice(0, 10);
        }
      });
    },

    handleChange() {
      this.titleVisible = true;
    },
    //修改确认
    sumitInstall() {
      statisServer.updateName(this.installForm).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: "修改成功",
            message: res.message,
            type: "success"
          });
          this.titleVisible = false;
          this.getList();
        }
      });
    },
    accumulationClick() {
      this.issue = 2;
      this.accumulation = false;
      this.thisYear = true;
      this.NumberReports();
    },
    thisYearClick() {
      this.issue = 1;
      this.accumulation = true;
      this.thisYear = false;
      this.NumberReports();
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  background: url("../../assets/image/zhubeijing.png") center center no-repeat;
  background-size: 100% 100%;
}
.row-bg {
  height: 72px;
  text-align: center;
  line-height: 70px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}
.row-bg-1 {
  height: 40px;
  color: #fff;
}
.row-bg-2 {
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.row-bg-3 {
  height: 335px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.row-bg-4 {
  color: #8bdbe6;
  font-size: 25px;
  margin-top: 27%;
  font-weight: 500;
}
.row-bg-5 {
  height: 365px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
</style>
